<template>
  <view class="grouperEnter">
    <view class="area-title">联系人</view>
    <view class="row_input_box"><input type="text" v-model="addressObj.nickname" placeholder="请输入联系人" /></view>
    <view class="area-title">联系电话</view>
    <view class="row_input_box"><input type="text" v-model="addressObj.mobile" placeholder="请输入联系电话" /></view>
    <view class="area-title">所在区域</view>
    <view class="row_input_box" @tap="openMap">
      <span v-show="!addressObj.province">请选择</span>
      <span v-show="addressObj.province">{{ addressObj.province }} {{ addressObj.city }} {{ addressObj.county }}</span>
    </view>
    <view class="area-title">详细地址</view>
    <view class="row_input_box"><input type="text" v-model="addressObj.address" placeholder="请输入详细地址" /></view>
    <view class="area-title">店铺图片</view>
    <view class="upload_img_list">
      <uploadImage :maxCount="1" @success="uploadSuccess"></uploadImage>
    </view>
    <button class="yellow_btn" @tap="submitApply">提交</button>
  </view>
</template>

<script>
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
var qqmapsdk;
import uploadImage from '../../components/uploadImage/uploadImage.vue';

export default {
  components: {
    uploadImage
  },
  data () {
    return {
      index: '',
      curRegion: '',
      qiniuUrl: 'http://qiniu.zhinh.cn/',
      addressObj: {
        nickname: '',
        mobile: '',
        province: '',
        city: '',
        county: '',
        address: '',
        image: ''
      }
    };
  },
  onLoad (val) {
    if (val.address_info) {
      this.addressObj = JSON.parse(val.address_info);
    }
    qqmapsdk = new QQMapWX({
      key: 'LPPBZ-KHRKX-U5K4E-ZLQSE-6SZJZ-KDBKQ' //自己的key秘钥 http://lbs.qq.com/console/mykey.html 在这个网址申请
    });
  },
  methods: {
    submitApply () {
      this.$api.applyGrouper(this.addressObj).then(res => {
        this.$helper.toast(res.msg);
        if (res.code == 1) {
          uni.navigateBack();
        }
      });
    },
    openMap () {
      let that = this;
      uni.getFuzzyLocation({
        type: 'gcj02', //返回可以用于wx.openLocation的经纬度
        success (res) {
          console.log(res, '获取地址成功');
          const latitude = res.latitude;
          const longitude = res.longitude;
          uni.chooseLocation({
            latitude, //要去的纬度-地址
            longitude, //要去的经度-地址
            success (rex) {
              console.log('选择地址成功', rex, that, this);
              that.getLocal(rex.latitude, rex.longitude);
              console.log(that.addressObj, '选择地址');
            },
            fail (res) {
              console.log(res, '选择地址失败原因');
            }
          });
        },
        fail (res) {
          that.$mUtils.toast('定位失败，请打开手机定位再试!');
        }
      });
    },
    // 获取当前地理位置
    getLocal (latitude, longitude) {
      let that = this;
      qqmapsdk.reverseGeocoder({
        location: {
          latitude: latitude,
          longitude: longitude
        },
        success: res => {
          console.log(res, '当前地理位置');
          let address = {};
          that.addressObj.province = res.result.address_component.province;
          that.addressObj.city = res.result.address_component.city;
          that.addressObj.county = res.result.address_component.district;
          that.addressObj.address = res.result.address_component.street_number;
          // that.addressObj.latitude = res.result.location.lat;
          // that.addressObj.longitude = res.result.location.lng;
          // this.userAddress=res.result.address;
          // uni.setStorageSync('address', address);
        },
        fail: res => {
          console.log(res);
        },
        complete: res => {
          // console.log(res);
        }
      });
    },
    uploadSuccess (val) {
      this.addressObj.image = val.map(item => this.qiniuUrl + item.url) + '';
    }
  }
};
</script>

<style lang="scss">
.grouperEnter {
  min-height: 100vh;
  background-color: #fff;
  padding: 24rpx;
  box-sizing: border-box;
  .row_input_box {
    display: flex;
    align-items: center;
    padding: 24rpx;
    height: 90rpx;
    box-sizing: border-box;
    background: #f9f9f9;
    border-radius: 10rpx;
    font-size: 28rpx;
    color: #999;
    margin-bottom: 20rpx;
  }
  .yellow_btn {
    margin-top: 60rpx;
  }
}
</style>
